<template>
    <div class="timeList">
        <div class="timeList_body" >
            <div v-for="(item, index) in timeListData"
            :key="index">
                <div class="data-item-folder">
                    <img src="@/assets//multiTime/文件夹.png" class="imgSize" />
                    <span>{{ item.name }}</span>
                </div>
                <div
                    v-if="item.children&&item.children.length>0"
                    class="data-item-child-panel"
                >
                    <TimeListItem
                    v-for="(item2) in item.children"
                    :key="item2.key"
                    :item-level="2"
                    :item="item2"
                    @item-click="handleMenuClick"
                    ></TimeListItem>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup>

  import { ref, onMounted, computed, onBeforeUnmount, watch } from "vue";
  import TimeListItem from "./timeListItem.vue";


  const timeListData = ref([
    {name:'影像产品',key:'1',children:[
        {name:'镶嵌图',key:'1-1'},
        {name:'日新图',key:'1-2'},
    ]},
    {name:'基础数据',key:'2',children:[
        {name:'政区境界',key:'2-1',children:[
            {name:'境界政区',key:'2-1-1'},
        ]},
        {name:'影像数据',key:'2-2',children:[
            {name:'遥感影像',key:'2-2-1'},  
        ]},
    ]},
    {name:'影像产品',key:'1',children:[
        {name:'镶嵌图',key:'1-1'},
        {name:'日新图',key:'1-2'},
    ]},
    {name:'基础数据',key:'2',children:[
        {name:'政区境界',key:'2-1',children:[
            {name:'境界政区',key:'2-1-1'},
        ]},
        {name:'影像数据',key:'2-2',children:[
            {name:'遥感影像',key:'2-2-1'},  
        ]},
    ]},{name:'影像产品',key:'1',children:[
        {name:'镶嵌图',key:'1-1'},
        {name:'日新图',key:'1-2'},
    ]},
    {name:'基础数据',key:'2',children:[
        {name:'政区境界',key:'2-1',children:[
            {name:'境界政区',key:'2-1-1'},
        ]},
        {name:'影像数据',key:'2-2',children:[
            {name:'遥感影像',key:'2-2-1'},  
        ]},
    ]},{name:'影像产品',key:'1',children:[
        {name:'镶嵌图',key:'1-1'},
        {name:'日新图',key:'1-2'},
    ]},
    {name:'基础数据',key:'2',children:[
        {name:'政区境界',key:'2-1',children:[
            {name:'境界政区',key:'2-1-1'},
        ]},
        {name:'影像数据',key:'2-2',children:[
            {name:'遥感影像',key:'2-2-1'},  
        ]},
    ]},
  ]);
//   const Shouqi = ref(false);
//   const headerShowSatatus = computed(() => headerStore.headerShowSatatus);
 

  
  onMounted(() => {

  });
  //点击事件
  const handleMenuClick=(item)=>{
    console.log(item)
  }
  
  </script>
  
  <style lang="scss" scoped>
  .timeList{
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    .timeList_body{
        overflow-y: auto;
        width: 100%;
        height: calc(100% - 44px);
        // background-color: #333949;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 0 20px 40px;
        overflow: hidden;

        .data-item-folder {
            display: flex;
            align-items: center;
            height: 36px;
            padding-left: 30px;
            // background-color: #333949;
            border: 2px solid transparent;
            border-radius: 4px;
            font-size: 16px;
            color: #ffffff;
            span {
                padding: 6px;
            }
            .imgSize{
                width: 24px;
                height: 24px;
            }
        }

      .data-item-child-panel {
        .data-item-folder {
          padding-left: 55px;
          cursor: pointer;
          &:hover {
            width: 354px;
            height: 36px;
            border-radius: 4px;
            opacity: 1;
            border-image: linear-gradient(to right, #171cff, #38ffce) 1;
            color: #38ffce;
            // background: #777f911a;
          }
        }
      }

    }
  }
  </style>
  